<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="reset.min.css">
		<style>
			#box{
				border:1px solid transparent;
				width:700px;
				margin:30px auto;
				overflow: hidden;
			}
			.leftbox{
				height:300px;
				width:300px;
				float:left;
				position: relative;
			}
			.leftbox img{
				height:300px;
				width:300px;
			}
			.mark{
				height:100px;
				width:100px;
				background-color: red;
				opacity: 0.5;
				position: absolute;
				left:0;
				right:0;
				display: none;
			}
			.rightbox{
				height:400px;
				width:400px;
				float:right;
				background-color: #0000FF;
				overflow: hidden;
				position: relative;
				display: none;
			}
			.rightbox img{
				/* height:1200px;
				width:1200px; */
				position: absolute;
				left:0;
				right:0;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="leftbox">
				<!-- 红色小盒子 mark-->
				<div class="mark"></div>
				<img src="images/1.jpg" alt="">
			</div>
			<div class="rightbox">
				<img src="images/2.jpg" id="bigimg" alt="">
			</div>
		</div>
		<script src="index.js"></script>
	</body>
</html>
